<template>
  <view class="bg-white">
    <sb-back-icon></sb-back-icon>
    <view class="flex j-c padv30">
      <sb-img
        :src="info.avatar"
        @click.native="chooseAvatar"
        w="200"
        r="200"
      ></sb-img>
    </view>
    <u-cell-group>
      <u-cell-item title="UserId" :value="info.id" :arrow="false">
      </u-cell-item>

      <u-cell-item
        title="UserName"
        @click="update('username')"
        :value="info.username"
      ></u-cell-item>
      <u-cell-item
        title="NickName"
        @click="update('nickname')"
        :value="info.nickname"
      ></u-cell-item>
      <u-cell-item
        title="RealName"
        @click="update('realname')"
        :value="info.realname"
      ></u-cell-item>
      <u-cell-item
        title="BirthDay"
        @click="update('birthday')"
        :value="info.birthday"
      ></u-cell-item>
      <u-cell-item
        :arrow="false"
        title="LastLoginAt"
        :value="$fmtTime(info.lastLoginAt)"
      >
      </u-cell-item>
    </u-cell-group>

    <!-- <view class="flex j-c c-m padv50" @click="logout">退出登录</view> -->
    <u-modal
      v-model="show"
      @confirm="confirm"
      show-cancel-button
      title="Update Info"
      :async-close="true"
    >
      <view class="slot-content" style="padding: 20rpx">
        <u-input
          v-model="tempField"
          @click="openCalendar"
          placeholder="请选择日期"
        ></u-input>
        <u-calendar
          v-model="calendarShow"
          @change="(e) => (tempField = e.result)"
        ></u-calendar>
      </view>
    </u-modal>
  </view>
</template>
<script>
import {
  SESSION_KEY,
  OPEN_ID,
  UNION_ID,
  TOKEN,
  LOGIN_USER_INFO,
} from "@/config/constant";
export default {
  data() {
    return {
      info: {},
      code: "",
      show: false,
      tempField: "",
      key: "",
      showPicker: false,
      calendarShow: false,
      currentFiled: "",
    };
  },
  onLoad: function () {
    if (!this.$checkLogin()) return this.$redirect2Login();
    this.getInfo();
    uni.$on("uAvatarCropper", (path) => {
      // console.log(this.handleUploadAvatar);
      this.handleUploadAvatar(path);
    });
  },
  methods: {
    openCalendar() {
      if (this.currentFiled === "birthday") {
        this.calendarShow = true;
      }
    },
    // 上传修改头像
    async handleUploadAvatar(path) {
      let { data } = await this.$upload(path);
      console.log(data);
      //上传完更新数据库
      if (!data) return this.$msg("头像上传失败");

      let { success } = await this.$postF("/user/updateField", {
        key: "avatar",
        val: data,
        id: this.info.id,
      });

      (success && this.$msg("更新成功")) || this.$msg("更新失败");

      setTimeout(() => {
        this.getInfo();
      }, 500);
    },
    chooseAvatar() {
      this.$go2(
        "/uview-ui/components/u-avatar-cropper/u-avatar-cropper?" +
          this.convertObj2Str({
            destWidth: 150,
            rectWidth: 100,
            fileType: "jpg",
          })
      );
    },
    // 退出登录
    async logout() {
      await this.$confirm("确定注销登录?");
      uni.removeStorageSync(TOKEN);
      // uni.removeStorageSync(OPEN_ID)
      // uni.removeStorageSync(UNION_ID)
      // uni.removeStorageSync(LOGIN_USER_INFO)
      try {
        let service = app.getIMService();
        service.Connection.disconnect();
      } catch (e) {}
      this.$go2("/pages/main/tabbar/index/index", true);
    },

    // 修改数据
    update(filed) {
      this.tempKey = filed;
      this.tempField = this.info[filed === "ENTERPRISE" ? "company" : filed];
      this.show = true;
      this.currentFiled = filed;
    },

    async getInfo() {
      let { success, data } = await this.$get("/user/getUserInfo");
      if (success) this.info = data;
    },
    async updateData(key, val) {
      let { success } = await this.$postF("/user/updateField", {
        key,
        val,
        id: this.info.id,
      });
      this.$msg(success ? "更新成功" : "更新失败", () => this.getInfo());
    },

    async confirm() {
      await this.updateData(this.tempKey, this.tempField);
      this.show = false;
    },
  },
};
</script>

<style></style>
